<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/plugin/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="/plugin/swiper/swiper.min.css" />
    <link rel="stylesheet" href="/plugin/layui/css/layui.css" />
    <link rel="stylesheet" href="/css/myAnimate.css" />
    <link rel="stylesheet" href="/css/common.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/animate.css" />
    <link rel="stylesheet" href="/css/fonts/iconfont.css" />
    <link rel="stylesheet" href="/plugin/bootstrap/dist/select/select.css" />
    <link
      rel="stylesheet"
      href="/plugin/bootstrap/dist/datePicker/datetimepicker.min.css"
    />
    <link rel="stylesheet" href="/plugin/summernote/summernote.css" />
    <link rel="stylesheet" href="/css/theme_red.css" />
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/plugin/swiper/swiper.min.js"></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/js/bootstrap.min.js"
    ></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/dist/datepicker/datetimepicker.min.js"
    ></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/dist/select/select.js"
    ></script>
    <script type="text/javascript" src="/plugin/layui/layui.js"></script>
    <script
      type="text/javascript"
      src="/plugin/summernote/summernote.min.js"
    ></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/dist/dist_zh.js"
    ></script>
  </head>
  <body class="child_body">
    <div class="flowPathModal comModal">
      <div class="blue flowName">查看审批历史</div>
      <div class="swiper flowPath" id="flowPath">
        <div class="swiper-wrapper">
          <div class="swiper-slide flex">
            <div class="flowItem completed">
              <div class="statusName">
                <span>录入</span>
              </div>
              <div class="text1">长沙市委网信办</div>
              <div class="text2">CSWXB</div>
              <div class="text2">2024-01-01 12:12:12</div>
            </div>
            <div class="flowImg">
              <span class="iconfont icon-arrow-right"></span>
            </div>
          </div>
          <div class="swiper-slide flex">
            <div class="flowItem inProgress">
              <div class="statusName">
                <span>提交</span>
              </div>
              <div class="text1">长沙市委网信办</div>
              <div class="text2">CSWXB</div>
              <div class="text2">2024-01-01 12:12:12</div>
            </div>
            <div class="flowImg">
              <span class="iconfont icon-arrow-right"></span>
            </div>
          </div>
          <div class="swiper-slide flex">
            <div class="flowItem">
              <div class="statusName">
                <span>派发</span>
              </div>
              <div class="text1">长沙市委网信办</div>
              <div class="text2">CSWXB</div>
              <div class="text2">2024-01-01 12:12:12</div>
            </div>
            <div class="flowImg">
              <span class="iconfont icon-arrow-right"></span>
            </div>
          </div>
          <div class="swiper-slide flex">
            <div class="flowItem">
              <div class="statusName">
                <span>派发</span>
              </div>
              <div class="text1">长沙市委网信办</div>
              <div class="text2">CSWXB</div>
              <div class="text2">2024-01-01 12:12:12</div>
            </div>
            <div class="flowImg">
              <span class="iconfont icon-arrow-right"></span>
            </div>
          </div>
          <div class="swiper-slide flex">
            <div class="flowItem">
              <div class="statusName">
                <span>派发</span>
              </div>
              <div class="text1">长沙市委网信办</div>
              <div class="text2">CSWXB</div>
              <div class="text2">2024-01-01 12:12:12</div>
            </div>
            <div class="flowImg">
              <span class="iconfont icon-arrow-right"></span>
            </div>
          </div>
          <div class="swiper-slide flex">
            <div class="flowItem">
              <div class="statusName">
                <span>派发</span>
              </div>
              <div class="text1">长沙市委网信办</div>
              <div class="text2">CSWXB</div>
              <div class="text2">2024-01-01 12:12:12</div>
            </div>
            <div class="flowImg">
              <span class="iconfont icon-arrow-right"></span>
            </div>
          </div>
          <div class="swiper-slide flex">
            <div class="flowItem">
              <div class="statusName">
                <span>派发</span>
              </div>
              <div class="text1">长沙市委网信办</div>
              <div class="text2">CSWXB</div>
              <div class="text2">2024-01-01 12:12:12</div>
            </div>
            <div class="flowImg">
              <span class="iconfont icon-arrow-right"></span>
            </div>
          </div>
          <div class="swiper-slide flex">
            <div class="flowItem">
              <div class="statusName">
                <span>派发</span>
              </div>
              <div class="text1">长沙市委网信办</div>
              <div class="text2">CSWXB</div>
              <div class="text2">2024-01-01 12:12:12</div>
            </div>
            <div class="flowImg">
              <span class="iconfont icon-arrow-right"></span>
            </div>
          </div>
          <div class="swiper-slide flex">
            <div class="flowItem">
              <div class="statusName">
                <span>派发</span>
              </div>
              <div class="text1">长沙市委网信办</div>
              <div class="text2">CSWXB</div>
              <div class="text2">2024-01-01 12:12:12</div>
            </div>
            <div class="flowImg">
              <span class="iconfont icon-arrow-right"></span>
            </div>
          </div>
          <div class="swiper-slide flex">
            <div class="flowItem">
              <div class="statusName">
                <span>派发</span>
              </div>
              <div class="text1">长沙市委网信办</div>
              <div class="text2">CSWXB</div>
              <div class="text2">2024-01-01 12:12:12</div>
            </div>
            <div class="flowImg">
              <span class="iconfont icon-arrow-right"></span>
            </div>
          </div>
          <div class="swiper-slide last-slide flex">
            <div class="flowItem">
              <div class="statusName">
                <span>派发</span>
              </div>
              <div class="text1">长沙市委网信办</div>
              <div class="text2">CSWXB</div>
              <div class="text2">2024-01-01 12:12:12</div>
            </div>
            <!-- <div class="flowImg">
              <span class="iconfont icon-arrow-right"></span>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="comNavBox">
      <div class="viewBox">
        <div class="navView">
          <div class="formModal">
            <div class="blueTitle">通报信息</div>
            <div class="formHead flex">
              <div class="title flex-1">
                <span class="spanText">基础信息</span>
              </div>
              <div class="formHeadOper">
                <span
                  class="operateView iconfont icon-more-right showMore"
                ></span>
              </div>
            </div>
            <div class="formBox">
              <div class="form-inline row">
                <div class="formItem col-md-6 flex">
                  <label class="form-label w150">输入框</label>
                  <div class="flex-1">
                    <input
                      type="text"
                      disabled
                      class="form-control"
                      placeholder="请输入用户名"
                      value="56455"
                    />
                  </div>
                </div>
                <div class="formItem col-md-6 flex">
                  <label class="form-label w150">日期</label>
                  <div class="flex-1 div_input">2024-01-05</div>
                  <!-- <div id="formDatePicker"></div> -->
                </div>
                <div class="formItem col-md-6 flex">
                  <label class="form-label w150">日期区间</label>
                  <div class="flex-1 div_input">2024-01-05~2024-01-14</div>
                </div>
                <div class="formItem col-md-6 flex">
                  <label class="form-label w150">checkBox</label>
                  <div class="flex-1 comCheckBox p-t-5">是</div>
                </div>
                <div class="formItem col-md-6 flex">
                  <label class="form-label w150">radio</label>
                  <div class="flex-1 comRadioBox p-t-5">3</div>
                </div>
                <div class="formItem col-md-6 flex">
                  <label class="form-label w150">开关</label>
                  <div class="flex-1 lineheight32">
                    <!-- switchRound -->
                    开
                    <!-- <div class="comSwitch off"></div> -->
                  </div>
                </div>
                <div class="formItem col-md-6 flex">
                  <label class="form-label w150">备注</label>
                  <div class="flex-1">
                    <textarea
                      class="form-control"
                      disabled
                      placeholder="请输入用户名"
                    ></textarea>
                  </div>
                </div>
                <div class="formItem col-md-12 flex">
                  <label class="form-label w150">副文本</label>
                  <div class="flex-1">
                    <textarea
                      class="form-control"
                      disabled
                      placeholder="副文本"
                    ></textarea>
                  </div>
                  <!-- <div class="flex-1" id="myEditer"></div> -->
                </div>
                <div class="formItem col-md-6 flex">
                  <label class="form-label w150">上传图片</label>
                  <ul class="flex-1 picListBox" id="myPicList">
                    <!-- <li class="item fileItem">
                      <span class="iconfont icon-add-wide"></span>
                      <input type="file" onchange="fileChange(this)" />
                    </li> -->
                    <li class="item">
                      <img src="../images/login_bg.png" />
                    </li>
                  </ul>
                </div>
                <div class="formItem col-md-6 flex">
                  <label class="form-label w150">上传附近</label>
                  <div class="flex-1 lineheight32">测试附件.pdf</div>
                </div>
              </div>
            </div>
            <div class="formHead flex">
              <div class="title flex-1">
                <span class="titleNumber">01</span
                ><span class="spanText">基础信息</span>
              </div>
              <div class="formHeadOper clearfix">
                <span
                  title="新增事务"
                  class="operAdd iconfont icon-add-rs m-r-15"
                ></span>
                <span
                  class="operateView iconfont icon-more-right showMore"
                ></span>
              </div>
            </div>
            <div class="formBox p-l-r-15">
              <table class="table" id="formTableList"></table>
            </div>
            <!-- <div class="formBtns">
              <button class="btn btn-default">取消</button>
              <button class="btn btn-info">提交</button>
            </div> -->
          </div>
          <div class="formModal m-t-15">
            <div class="blueTitle">通报附件</div>
            <div class="formBox p-l-r-15">
              <table class="table" id="formFileList"></table>
            </div>
            <div class="formHead flex">
              <div class="title flex-1">
                <span class="spanText">事件流程</span>
              </div>
              <div class="formHeadOper">
                <span
                  class="operateView iconfont icon-more-right showMore"
                ></span>
              </div>
            </div>
            <div class="p-15 eventFlow flex wrap">
              <div class="flowItem flex items-center">
                <div class="box flex-1">
                  <img src="../images/user_head.png"></img>
                  <div class="text">2021-02-12 05:12:12</div>
                  <div class="text">张三&nbsp;录入了审批流程</div>
                </div>
                <span class="iconfont icon-arrow-right"></span>
              </div>
              <div class="flowItem flex items-center">
                <div class="box flex-1">
                  <img src="../images/user_head.png"></img>
                  <div class="text">2021-02-12 05:12:12</div>
                  <div class="text">张三&nbsp;录入了审批流程</div>
                </div>
                <span class="iconfont icon-arrow-right"></span>
              </div>
              <div class="flowItem flex items-center">
                <div class="box flex-1">
                  <img src="../images/user_head.png"></img>
                  <div class="text">2021-02-12 05:12:12</div>
                  <div class="text">张三&nbsp;录入了审批流程</div>
                </div>
                <span class="iconfont icon-arrow-right"></span>
              </div>
              <div class="flowItem flex items-center">
                <div class="box flex-1">
                  <img src="../images/user_head.png"></img>
                  <div class="text">2021-02-12 05:12:12</div>
                  <div class="text">张三&nbsp;录入了审批流程</div>
                </div>
                <span class="iconfont icon-arrow-right"></span>
              </div>
              <div class="flowItem flex items-center">
                <div class="box flex-1">
                  <img src="../images/user_head.png"></img>
                  <div class="text">2021-02-12 05:12:12</div>
                  <div class="text">张三&nbsp;录入了审批流程</div>
                </div>
                <span class="iconfont icon-arrow-right"></span>
              </div>
              <div class="flowItem flex items-center">
                <div class="box flex-1">
                  <img src="../images/user_head.png"></img>
                  <div class="text">2021-02-12 05:12:12</div>
                  <div class="text">张三&nbsp;录入了审批流程</div>
                </div>
                <span class="iconfont icon-arrow-right"></span>
              </div>
              <div class="flowItem flex items-center">
                <div class="box flex-1">
                  <img src="../images/user_head.png"></img>
                  <div class="text">2021-02-12 05:12:12</div>
                  <div class="text">张三&nbsp;录入了审批流程</div>
                </div>
                <span class="iconfont icon-arrow-right"></span>
              </div>
              <div class="flowItem flex items-center">
                <div class="box flex-1">
                  <img src="../images/user_head.png"></img>
                  <div class="text">2021-02-12 05:12:12</div>
                  <div class="text">张三&nbsp;录入了审批流程</div>
                </div>
                <span class="iconfont icon-arrow-right"></span>
              </div>
              <div class="flowItem flex items-center">
                <div class="box flex-1">
                  <img src="../images/user_head.png"></img>
                  <div class="text">2021-02-12 05:12:12</div>
                  <div class="text">张三&nbsp;录入了审批流程</div>
                </div>
                <span class="iconfont icon-arrow-right"></span>
              </div>
              <div class="flowItem flex items-center">
                <div class="box flex-1">
                  <img src="../images/user_head.png"></img>
                  <div class="text">2021-02-12 05:12:12</div>
                  <div class="text">张三&nbsp;录入了审批流程</div>
                </div>
                <span class="iconfont icon-arrow-right opacity0"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    $(function () {
      bindComEvent();
      $(".nav-tabs li")
        .off("click")
        .on("click", function () {
          var index = $(this).index();
          var status = $(this).data("status");
          $(this).addClass("active").siblings().removeClass("active");
          $(".comNavBox .navView").hide().eq(index).fadeIn();
        });
      //流程
      var mySwiper = new Swiper("#flowPath", {
        slidesPerView: "auto",
      });
      //销毁
      $("#myEditer").summernote("destroy");
      //初始化
      $("#myEditer").summernote({
        height: 300,
        width: "100%",
        tabsize: 2,
        placeholder: "请输入",
        lang: "zh-CN",
        callbacks: {
          onImageUpload: function (files) {
            sendFile(files);
          },
        },
      });
      //获取值
      //   $("#myEditer").summernote("code");
      //主动赋值
      $("#myEditer").summernote("code", "<h3>测试</h3>");
      $("#formDatePicker").datePicker({
        dateType: "date",
        format: "date",
        disabled: true,
      });
      $("#formDateAreaPicker").datePicker({
        dateType: "daterange",
        format: "date",
      });
      $(".operateView")
        .off("click")
        .on("click", function () {
          if ($(this).hasClass("showMore")) {
            $(this).removeClass("showMore").addClass("hideMore");
          } else {
            $(this).removeClass("hideMore").addClass("showMore");
          }
          $(this).parents(".formHead").next(".formBox").fadeToggle();
        });
      var tableOptions = {
        id: "formTableList",
        cols: [
          {
            type: 'checkbox',
            align: "center",
            // sortable: true, //排序
          },
          {
            field: "name",
            title: "服务名",
            align: "center",
            // sortable: true, //排序
          },
          {
            field: "sum",
            title: "金额",
            align: "center",
          },
          {
            field: "PV",
            title: "访问量",
            align: "center",
          },
          {
            field: "name",
            title: "服务名",
            align: "center",
            // sortable: true, //排序
          },
          {
            field: "sum",
            title: "金额",
            align: "center",
          },
          {
            field: "PV",
            title: "访问量",
            align: "center",
          },
        ],
        data: [
          { name: "测试", sum: 100, PV: 100, operate: "" },
          { name: "张三", sum: 10, PV: 105, operate: "" },
        ],
      };
      var flieOptions = {
        id: "formFileList",
        cols: [
          {
            type: "numbers",
            title: "序号",
            width: 50,
          },
          {
            field: "name",
            title: "单位名称",
          },
          {
            field: "fileName",
            title: "附件名称",
            templet: function (d) {
              return (
                '<a class="link" href="' +
                d.filePath +
                '">' +
                d.fileName +
                "</a>"
              );
            },
          },
          {
            field: "uploadTime",
            title: "上传时间",
          },
        ],
        data: [
          {
            name: "测试",
            fileName: "测试附件.pdf",
            filePath: "",
            uploadTime: "2021-01-01",
          },
          {
            name: "测试",
            fileName: "测试附件.pdf",
            filePath: "",
            uploadTime: "2021-01-01",
          },
        ],
        // fixedColumns: {
        //   leftColumns: 1, //固定列
        //   rightColumns: 1, //固定列
        // },
      };
      var statusOptions = {
        id: "statusTable",
        cols: [
          {
            field: "name",
            title: "单位名称",
          },
          {
            field: "fileName",
            title: "附件名称",
            templet: function (d) {
              return (
                '<a class="link" href="' +
                d.filePath +
                '">' +
                d.fileName +
                "</a>"
              );
            },
          },
          {
            field: "createBy",
            title: "操作者",
          },
          {
            field: "status",
            title: "操作状态",
          },
          {
            field: "content",
            title: "申请理由/审核意见",
          },
          {
            field: "createTime",
            title: "时间",
          },
        ],
        data: [
          {
            name: "测试",
            fileName: "测试附件.pdf",
            createBy: "张三",
            status: "",
            content: "",
            createTime: "2021-01-01",
          },
          {
            name: "测试",
            fileName: "测试附件.pdf",
            createBy: "张三",
            status: "",
            content: "",
            createTime: "2021-01-01",
          },
        ],
      };
      $.layuiTable(tableOptions);
      $.layuiTable(flieOptions);
      // $.layuiTable(statusOptions);
    });
    function fileChange(e) {
      preview(e, "myPicList", true);
    }
    function sendFile(files) {
      var size = files[0].size;
      var formData = -new FormData();
      formData.append("file", files[0]);
      return false;
      $.ajax({
        data: formData,
        type: "post",
        url: "",
        dataType: "json",
        success: function (res) {},
        error: function () {},
      });
    }
  </script>
</html>
